<template>
  <button @click="isshow=true">显示对话框</button>
  <teleport to="body">
    <div v-if="isshow" class="mask">
      <div class="dhk">
      <h2>内容一</h2>
      <h2>内容二</h2>
      <button @click="isshow=false">关闭对话框</button>
    </div></div>
  </teleport>
</template>

<script>
import {ref} from "vue";
export default {
  name: "Dhk",
  setup(){
    let isshow=ref(false)
    return{isshow}
  }
}
</script>

<style scoped>
  .mask{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(3,2,3,45%);
  }
  .dhk{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 300px;
    height: 300px;
    align-content: center;
    background-color: coral;
    padding: 10px;
  }
</style>